Can anyone help me to know what is the difference between margin and padding and where do I have to use padding and where is margin?
What is the difference between margin and padding in CSS?
822
12-Jul-2021
Aryan Kumar
10-Jun-2023Margin and padding are two CSS properties that are used to control the space around an element. However, they do so in different ways.
Margin is used to create space outside of an element, while padding is used to create space inside of an element.
In other words, margin pushes an element away from its surroundings, while padding pushes the element's content away from its border.
Here is a table that summarizes the key differences between margin and padding:
drive_spreadsheetExport to Sheets
Here is an example of how to use margin and padding to create a div element with a red background and a white border:
Code snippet
This code will create a div element with a red background, a white border, and a 10px margin and padding. The margin will push the div element 10px away from its surroundings, while the padding will push the div element's content 10px away from its border.
You can adjust the margin and padding values to suit your needs. You can also use margin and padding to create different effects, such as creating space between elements or adding a border around an element.
Ethan Karla
13-Jul-2021Margins and Padding are two important properties of CSS that help in creating a space between the elements of the latter. Margins are used to create a space outside the element.
e.g. if you create a div and you want a space from the outside of the div of 10px then you should apply margin property.
Whereas, if you want a space inside an element you should use padding.
As in the above example, you have created a div and on that div you have added some paragraph and you want 10px space between the border of the div and the paragraph then you should go through the padding.
Let us know this with the help of an example:
Here, you can understand all the logics behind Margin and padding
I think now your confusion got solved.
Note : Margin here is shown with red color and Padding with black.